<template>
    <div class="selectaddress">
        <div class="sa_div">
            <span>{{getSelectName()}}</span>
        </div>
        <div class="select_address_btn" @click="showSelect=true"> 
            <span>选择地址</span>
        </div>

        <div class="select_muban" v-if="showSelect">

        </div>

        <div class="select_dialog" v-if="showSelect">
            <div class="sd_main">
                <div class="sdm_left">
                    <div class="sdml_head">
                        <div class="sdmlh_div" :class="{selectsdmlh:active==0}" @click="setActive(0)">
                            <span>国内</span>
                        </div>
                        <div class="sdmlh_div sdmlh_div_next" :class="{selectsdmlh:active==1}" @click="setActive(1)">
                            <span>国外</span>
                        </div>
                    </div>
                    <div class="sdml_list" v-if="active==0">
                        <template v-for="item in chinaDataNew">
                             <div class="sdml_div" :class="{select_sdml:nowItem.id==item.id}" @click="setThird(item)" v-show="item.show">
                                <span>{{item.name}}</span>
                            </div>
                        </template>
                    </div>
                    <div class="sdml_list" v-if="active==1">
                        <template v-for="item in otherData">
                             <div class="sdml_div" :class="{select_sdml:nowItem.id==item.id}" @click="setThird(item)" v-show="item.show">
                                <span>{{item.name}}</span>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sdm_right">
                    <div class="search_div">
                        <div class="sd_input">
                            <input placeholder="请输入" v-model="searchtext"></input>
                        </div>
                        <div class="sd_btn" @click="searchMain">
                            <span>搜索</span>
                        </div>
                    </div>
                    <div class="sdmr_top">
                        <template v-for="item in fourthWorkList">
                            <div class="sdmrt_div" :class="{selectsdmrt:getSelectFourth(item) || nowFourth.id==item.id }" @click="setFourth(item)" v-show="item.show"> 
                                <span>{{item.name}}</span>  
                            </div>
                        </template>
                    </div>
                    <div class="sdmr_top sdmr_next">
                        <template v-for="item in fiveWorkList">
                            <div class="sdmrt_div" @click="setFive(item)" :key="item.id" :id="item.id" :class="{selectsdmrt:getSelectFive(item)}" v-show="item.show">
                                <span>{{item.name}}</span>
                            </div>
                        </template>
                    </div>

                    <div class="sdmr_bottom">
                        <template v-for="(item,indx) in selectAddressList">
                            <div class="sdmrb_div">
                                <span v-if="item.fiveName.indexOf('全市')>-1">{{item.fourthName}}</span>
                                 <span v-else>{{item.fourthName}}-{{item.fiveName}}</span>
                                <i class="el-icon-error" @click="deleteAddress(indx)"></i>
                            </div>
                        </template>
                    </div>
                    <div class="sdmr_btn_list">
                        <el-button @click="showSelect = false">取 消</el-button>
                        <el-button type="primary" @click="sureAddress">确 定</el-button>
                    </div>
                </div>
            </div>
        </div>
     

        
    </div>
  </template>
  
  <script>
  import homeapi from "@/api/api.js";

  export default {
	name: 'selectaddress',
    data(){
        return {
            active:0,
            nowItem:{},
            fourthWorkList:[],
            fiveWorkList:[],

            selectAddressList:[],
            nowFourth:{},
            showSelect:false,
            searchtext:"",

            chinaDataNew:[],

            
        }
    },
	props: {
		chinaData:Array,
        otherData:Array,
        addressData:Array
	},
    mounted(){
        if(this.chinaData && this.chinaData.length>0){
            this.chinaDataNew=JSON.parse(JSON.stringify(this.chinaData))
            this.nowItem=this.chinaDataNew[0]
        }
        if(this.nowItem.id){
            this.getFourthList();
        }
        this.chinaDataNew.map(res=>{
            res.show=true;
            res.child.map(json=>{
                json.show=true;
                json.child.map(item=>{
                    item.show=true;
                })
            })
        })
        console.log(this.chinaDataNew)
       
        this.addressData.map(res=>{
        
            if(res.first=='1881964578335936513'){
                let thirdName=""
                let fourthName=""
                let fiveName=""
                this.chinaDataNew.map(json=>{
                    if(res.third==json.id){
                         
                        thirdName=json.name

                        json.child.map(item=>{
                            if(item.id==res.fourth){
                                fourthName=item.name

                                item.child.map(itemres=>{
                                    if(itemres.id==res.five){
                                        fiveName=itemres.name
                                    }
                                })
                            }
                        })
                    }
                })

                
                let jsonData={
                    first:"1881964578335936513",
                    second:"1881965479771557890",
                    third:res.third,
                    thirdName:thirdName,
                    fourth:res.fourth,
                    fourthName:fourthName,
                    five:res.five,
                    fiveName:fiveName
                }
                this.selectAddressList.push(jsonData)
            }
            else{

            }
        })
        console.log(this.selectAddressList)

       
    },
	methods:{
        sureAddress(){
            this.$emit("sureAddress",this.selectAddressList);
            this.showSelect=false;
        },
        setActive(type){
            this.active=type;
        },  
        searchMain(){
            console.log(this.active)
            if(this.active==0){
                this.chinaDataNew.map(res=>{
                    console.log(this.searchtext)
                    console.log(res.name)
                    if(res.name.indexOf(this.searchtext)>-1){
                        res.show=true;
                    }
                    else{
                        res.show=false;
                    }
                    res.child.map(json=>{
                        if(json.name.indexOf(this.searchtext)>-1){
                            json.show=true;
                            res.show=true
                        }
                        else{
                            json.show=false;
                        }

                        json.child.map(item=>{
                            if(item.name.indexOf(this.searchtext)>-1){
                                json.show=true;
                                res.show=true
                                item.show=true;
                            }
                            else{
                                item.show=false;
                            }
                        })
                    })
                })
            } 
            this.$forceUpdate();
        },
		


        setThird(item){
            console.log(item)
            this.nowItem=item;
            this.getFourthList();
        },

        setFourth(item){
           
            this.nowFourth=item;
            this.getFiveList();
        },
        setFive(item){
            let have=false;
            this.selectAddressList.map(res=>{
                if(res.five==item.id){
                    have=true;
                }
            })
            if(have==false){
                let jsonData={
                    first:"1881964578335936513",
                    second:"1881965479771557890",
                    third:this.nowItem.id,
                    thirdName:this.nowItem.name,
                    fourth:this.nowFourth.id,
                    fourthName:this.nowFourth.name,
                    five:item.id,
                    fiveName:item.name
                }
                let haveList=[];
                if(item.name.indexOf('全市')>-1){
                    this.selectAddressList.map((res,index)=>{
                        if(res.fourth==this.nowFourth.id){
                            haveList.push(res)
                        }
                    })
                    haveList.map(res=>{
                        this.selectAddressList.map((json,index)=>{
                            if(res.five==json.five){

                                this.selectAddressList.splice(index,1)
                            }
                        })
                    })
                    this.selectAddressList.push(jsonData)
                }
                else{
                    this.selectAddressList.push(jsonData)
                }
               
            }
            
        },

        getSelectFourth(item){
            let have=false
            this.selectAddressList.map(res=>{
                if(res.fourth==item.id){
                    have=true;
                }
            })
            return have;
        },

        getSelectFive(item){
            let have=false
          
            this.selectAddressList.map(res=>{
                if(res.five==item.id){
                    have=true;
                }
            })
         
            return have;
        },

        getFourthList(){

            if(this.active==0){
                this.fourthWorkList=this.nowItem.child
                if(this.fourthWorkList && this.fourthWorkList.length>0){
                    this.nowFourth=this.fourthWorkList[0];
                    this.getFiveList();
                }
            }
            // let haveChina=false
            // let chinaItem={}
            // this.chinaData.map(res=>{
            //     if(res.id==this.nowItem.id){
            //         haveChina=true
            //         chinaItem=res;
            //     }
            // })
            // if(haveChina){
            //     this.addressData.fourthWorkList=chinaItem.child
            //     this.addressData.isChina=true
            // }
            // else{
            //     this.otherData.map(res=>{
            //         if(res.id==this.addressData.third){
            //             chinaItem=res;
            //             this.addressData.isChina=false
            //             this.addressData.first=""
            //             this.addressData.second=""
            //             this.addressData.fourthWorkList=res.child
            //         }
            //     })
            // }
        },
        async getFiveList(){
            if(this.active==0){
                console.log(this.nowFourth)
                this.fiveWorkList=this.nowFourth.child
            }
        },
        deleteAddress(index){
            this.selectAddressList.splice(index,1);
        },
        getSelectName(){
            let addressName=""
            this.selectAddressList.map(res=>{
                if(res.fiveName.indexOf('全市')>-1){
                    if(addressName==""){
                        addressName=res.fourthName
                    }
                    else{
                        addressName+=","+res.fourthName
                    }
                }
                else{
                     if(addressName==""){
                        addressName=res.fourthName+'-'+res.fiveName
                    }
                    else{
                        addressName+=","+res.fourthName+'-'+res.fiveName
                    }
                }
            })
            return addressName

        }
	}
  }
  </script>
<style scoped>
    .selectaddress{
        width: 100%; 
        display: flex;
        align-items: center;
        justify-content: flex-start;
    } 
    .select_address_btn{ 
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #F5792A;
        border-radius: 4px;
        color:#F5792A;
        font-size: 14px;
        padding: 0 15px;
        cursor: pointer;
    }
    .select_dialog{
        width: 800px;
        height: 600px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 10;
        background: #ffffff;
        margin: auto;
        border-radius: 8px;

    }
    .sd_main{
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 8px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .select_muban{
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .sdm_left{
        width: 200px;
        height: 100%;
        border-right: 1px solid #e6e6e6;
    }
    .sdml_head{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center ;
        margin-top: 15px;
    }
    .sdmlh_div{
        width: 70px;
        height: 30px;
        border-radius: 4px 0 0 4px;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
    }
    .selectsdmlh{
        border: 1px solid #F5792A;
        background: #F5792A;
        color: #ffffff;
    }
    .sdmlh_div_next{
        border-radius: 0px 4px 4px 4px;
    }
    .sdml_list{
        width: 100%;
       display: inline-block;
       margin-top: 15px;
       height: 540px;
       overflow: auto;

    }
    .sdml_div{
       width: 100%;
       padding-left: 30px;
       box-sizing: border-box; 
       display: flex;
       align-items: center;
       justify-content: flex-start;
       font-size: 14px;
       color: #333333;
       line-height: 35px;
       font-weight: bold;
       cursor: pointer;
       border-left: 3px solid #ffffff;
    }
    .sdm_right{
        flex: 1;
        height: 600px;
    }
    .sdmr_top{
        width: 100%;
        height: 170px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        overflow: auto;
        padding-left: 20px;
        box-sizing: border-box;
        margin-top: 15px;
    }
    .sdmrt_div{
        padding: 5px 15px;
        background: #f5f5f5;
        border: 1px solid #e6e6e6;
        font-size: 14px;
        color: #333333;
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 4px;
        cursor: pointer;
    }
    .sdmr_next{
        border-top: 1px solid #e6e6e6;
    }
    .select_sdml{
        border-left:3px solid rgb(245, 121, 42);
        background: rgba(245, 121, 42,0.1);
    }
    .selectsdmrt{
        background: rgb(245, 121, 42);
        color: #ffffff;
    }

    .sdmr_bottom{
        width: 100%;
        display: flex;
        height: 100px;
        align-items: flex-start;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        padding-left: 20px;
        box-sizing: border-box;

    }
    .sdmr_btn_list{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 30px;
        box-sizing: border-box;
    }

    .sdmrb_div{
        background: rgb(245, 121, 42);
        color: #ffffff;
        padding: 5px 10px;
        border-radius: 4px;
        position: relative;
        margin-left: 10px;
        margin-top: 10px;
    }
    .sdmrb_div i{
        position: absolute;
        top: -8px;
        right: -8px;
        color: #333333;
        font-size: 16px;
        cursor: pointer;
    }
    .sa_div{
        margin-right: 10px;
    }
    .search_div{
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: flex-start;
        margin-top: 30px;
        padding-left: 30px;
        box-sizing: border-box;
    }
    .sd_input input{
        width: 400px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #e6e6e6;
        outline: none;
        border-radius: 4px;
        padding-left: 15px;
        box-sizing: border-box;
    }
    .sd_btn{
        width: 70px;
        height: 35px;
        background: #F5792A;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #ffffff;
        margin-left: 15px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>
  